<template>
	<van-cascader title="选择城市" :options="options" @close="complete">
		<template #option="{ option }">
			<template v-if="!option.children || option.children.length === 0">
				<van-checkbox-group v-model="selectedValues" shape="square">
					<van-checkbox :name="option.value">
						{{ option.text }}
					</van-checkbox>
				</van-checkbox-group>
			</template>
			<template v-else>
				{{ option.text }}
			</template>
		</template>
	</van-cascader>
	<div>
		<h3>已选择的末级节点：</h3>
		<pre>{{ selectedValues }}</pre>
	</div>
</template>

<script setup lang="ts">
	import { useCascaderAreaData } from '@vant/area-data';
	import { ref } from 'vue';
	const options = useCascaderAreaData();
	const complete = () => {
		for (let s of selectedValues.value) {
			console.log(findParentsByValue(options, s))
		}
	}
	const selectedValues = ref();
	const findParentsByValue = (data : any, targetValue : string) => {
		for (const item of data) {
			if (item.value === targetValue) {
				return [item.text];
			}
			if (item.children) {
				const path = findParentsByValue(item.children, targetValue);
				if (path) {
					return [item.text, ...path];
				}
			}
		}
		return null;
	};
</script>